<template>
	<view class="outer">
		<input type="text" value="" placeholder="大家都在搜 : 滑雪服"/>
		<view class="content">
			<view class="bt">
				<text>为你推荐</text>
			</view>
			<view class="tj_all clear">
				<view class="tj" v-for="item in tj_data">{{item}}</view>
			</view>
		</view>
		<view class="history">
			<view class="bt">
				<text>最近搜索</text>
				<text class="qk" @click="del('all')">清空</text>
			</view>
			<view class="ls_all">
				<view class="ls" v-for="item in ls_data">
					<view>{{item}}</view>
					<view @click="del(item)">
						<uni-icons type="closeempty" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {	
			return {
				tj_data:['冲锋衣','2018帐篷','户外水杯','登山鞋','羽绒服','登山杖','背包'],
				ls_data:['冲锋衣','户外水杯','背包']
			}
		},
		onShow(){
			console.log('已触发onShow');	
		},
		methods: {
			del(v){
				if(v == 'all'){
					this.ls_data=[]
				}else{
					for(let i=0;i<this.ls_data.length;i++){
						if(this.ls_data[i]==v){
							this.ls_data.splice(i,1)
						}
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.outer{
		margin-top: 5rpx;
		border-top: 1px solid #DBDBDB;
		display:flex;
		flex-direction:column;
		align-items:center;
		input{
			background-color: #FAFAFA;
			width: 600rpx;
			padding: 30rpx;
			border-radius: 50rpx;
			margin-top: 30rpx;
		}
		>view{
			width: 750rpx;
		}
		.bt{
			display:flex;
			justify-content:space-between;
			padding: 20rpx 50rpx;
		}
		.qk{
			color: #A8A8A8;
		}
		.tj{
			border: 1px solid #464646;
			float: left;
			padding: 5rpx 30rpx;
			border-radius: 50rpx;
			margin: 20rpx 20rpx 20rpx 0;
			font-size: 32rpx;
		}
		.tj_all{
			margin-left: 50rpx;
			margin-bottom: 50rpx;
		}
		.ls_all{
			margin-left: 50rpx;
		}
		.ls{
			display:flex;
			justify-content:space-between;
			border-bottom: 1px solid #A8A8A8;
			padding: 30rpx 50rpx 30rpx 0;
			font-size: 44rpx;
		}
	}
	.clear::after{
		content: "";
		display: block;
		clear: both;
	}
</style>
